<template>
  <el-dialog :visible.sync="visible" v-dialogDrag :title="title" class="tl-dialog" width="1200px" @open="open" @close="close" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="app-container">
      <!-- 工具栏 -->
      <el-row>
        <tl-list-toolbar ref="toolbar" @refresh="doRefresh"  @exportExcel="doExportExcel" @columnCustomize="doColumnCustomize"  @displaySearch="doDisplaySearch" :isDisplayAdd="false" :isDisplayDeleteBatch="false" :isDisplayExport="isSys" :isDisplayRight="false"></tl-list-toolbar>
      </el-row>
      <el-table class="tl-table" :height="getHeight() * 0.5" style="width:100%" ref="mainTable" resizable-key="tableHeight" :resizable-refs="tableResizeRefs" v-loading="loading" :data="datas" border fit>
        <el-table-column label="项目级别" width="140px" header-align="center" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="productlinename" label="产品线" width="140px" header-align="center" align="left" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
        <el-table-column label="A" width="80px" header-align="center" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="doinga" label="进行中" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="donea" label="已完结" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="funda" label="产品金额（万元）"  width="100px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
        <el-table-column label="B" width="80px" header-align="center" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="doingb" label="进行中" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="doneb" label="已完结" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="fundb" label="产品金额（万元）"  width="100px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
        <el-table-column label="C" width="80px" header-align="center" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="doingc" label="进行中" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="donec" label="已完结" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="fundc" label="产品金额（万元）"  width="100px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
        <el-table-column label="D" width="80px" header-align="center" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="doingd" label="进行中" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="doned" label="已完结" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="fundd" label="产品金额（万元）"  width="100px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
        <el-table-column label="合计" width="80px" header-align="center" align="center" :show-overflow-tooltip="true">
          <el-table-column prop="doingtotal" label="进行中" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="donetotal" label="已完结" width="80px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="fundtotal" label="产品金额（万元）"  width="100px" header-align="center" align="center" :show-overflow-tooltip="true"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script>
// import checkPermission from '@/utils/permission' // 权限判断函数
/** mixins */
import { mixin_list } from '@tapui/mixins/mixin_list'
/** 子组件 */
import { getAction, putAction, postAction } from '@tapui/utils/http'
import { formatDate } from '@tapui/utils/date'
import { exportExcelAxio } from '@tapui/api/office'
export default {
  name: 'productSummary',
  components: {},
  mixins: [mixin_list],
  data() {
    return {
      url: {
        list: '/mpm/project/getProductLineSummaryList',
        exportExcel: '/mpm/project/exportProductBigExcel'
      },
      title: '数据统计——按产品线',
      visible: false,
      isQueryOnCreated: false
    }
  },
  props: {
    queryParams: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  computed: {
    isSys() {
      if (this.queryParams.qry_purchasepattern) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    open() {
      this.$nextTick(() => {
        this.loadData()
      })
    },
    close() {
      this.visible = false
    },
    beforeExportData() {
      return true
    },
    afterExportData() {},
    loadData(paramMap) {
      if (!this.url.list) {
        this.$tap.alert('请设置list地址!', 'warning')
        return
      }
      if (!this.beforeLoadData()) return
      // 数据查询
      this.loading = true
      getAction(this.url.list, this.queryParams)
        .then((res) => {
          if (res.success) {
            this.datas = res.result
          } else {
            this.$tap.alert(res.message, 'warning')
          }
          this.afterLoadData()
          this.loading = false
        })
        .catch((err) => {
          this.loading = false
        })
    },
    getHeight() {
      var div
      var h
      div = document.createElement('div')
      div.style.height = '100vh'
      div.style.maxHeight = 'none'
      div.style.boxSizing = 'content-box'
      document.body.appendChild(div)
      h = div.clientHeight
      document.body.removeChild(div)
      return h
    }
  },
  mounted() {}
}
</script>
<style scoped>
.tl-dialog >>> .el-dialog__body {
  padding: 5px 5px !important;
}
</style>
